<template>
	<hr class="two" />
	<h2>==== ToRaw 将响应式数据转化为非响应式 ===</h2>

	<h4>当前求和为：{{ sum }}</h4>
	<button @click="sum++">Ref响应式点我++</button>
	<button @click="toRawSum">Ref 响应式ToRaw ++</button>
	<hr>
	<h4>姓名：{{ name }}</h4>
	<h4>年龄：{{ age }}</h4>
	<h4>薪资：{{ job.j1.salary }}K</h4>
	<h3 v-show="person.car">座驾信息：{{ person.car }}</h3>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
	<button @click="showRawPerson">showRawPerson 最原始的person 值会变，但页面不更新</button>
	<button @click="addCar">给人添加一台车</button>
	<button @click="person.car.name+='!'">换车名</button>
	<button @click="changePrice">换价格</button>
</template>

<script>
import {markRaw, reactive, ref, toRaw, toRefs} from 'vue'

export default {
	name: 'ToRaw',
	setup() {
		//数据
		let sum = ref(0)
		let person = reactive({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})

// 将响应式数据（只能是 reactive (对象)缔造的） 转换为 原始数据
		function showRawPerson() {
			const p = toRaw(person)
			p.age++
			console.log(p)
		}

		function toRawSum() {
			let toRawSum = toRaw(sum)
			toRawSum.value++
			// console.log('toRawSum', toRawSum)

		}

		function addCar() {
			let car = {name: '奔驰', price: 40}
			person.car = car // 新加的car属性，为响应式数据（页面会直接更新显示），并可以进行后续响应式操作
			person.car = markRaw(car) // 标记car对象，原数据，后续操作页面不会响应

			console.log('ToRaw addCar markRaw car', car)
		}

		function changePrice() {
			person.car.price++
			console.log(person.car.price)
		}

		//返回一个对象（常用）
		return {
			sum,
			person, // 之后添加的属性 都会响应式更新 到页面上
			...toRefs(person),
			showRawPerson,
			addCar,
			changePrice,
			toRawSum
		}
	}
}
</script>

